<!--这是赠送名额组件-->
<template>
  <div v-loading="btnLoading">
    <div>
      <h3>
        <span>赠送名额</span>
      </h3>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="vip" name="vip"></el-tab-pane>
        <el-tab-pane label="svip" name="svip"></el-tab-pane>
      </el-tabs>
      <code>
        <svg-icon icon-class="message" style="margin-right:10px;color:red;font-size:20px;"></svg-icon>如果想减去名额，请在数值前填写 “-”。
      </code>
      <span>线上赠送名额：</span>
      <table v-if="activeName == 'vip'">
        <tr>
          <td class="leftTd">vip赠送名额：{{this.$route.query.partnerId}}</td>
          <td class="rightTd">
            <el-input
              v-model="editPartnerData.vipNum"
              clearable
              placeholder="请输入vip赠送名额"
              class="width500"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td class="leftTd">vip已用名额：</td>
          <td class="rightTd">
            <el-input
              v-model="editPartnerData.vipGivenQuota-editPartnerData.vipRemainingQuota"
              disabled
              placeholder="vip已用名额"
              class="width500"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td class="leftTd">vip剩余名额：</td>
          <td class="rightTd">
            <el-input
              v-model="editPartnerData.vipRemainingQuota"
              disabled
              placeholder="vip剩余名额"
              class="width500"
            ></el-input>
          </td>
        </tr>
      </table>
      <el-row v-if="activeName == 'vip'">
        <el-form
          :model="addTicktForm"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <label style="margin-left:59px">
            <font color="red">*</font> 兑换码类型：
          </label>
          <el-button type="primary" size="small" @click="vipShow = !vipShow">VIP兑换码</el-button>
          <el-button type="primary" size="small" @click="OBShow = !OBShow">欧币兑换码</el-button>

          <section v-if="vipShow">
            <el-form-item label="VIP兑换码：">
              <el-row>
                <el-col :span="16">
                  <el-table :data="vipList" style="width:370px">
                    <el-table-column label="添加数量" align="cneter">
                      <template slot-scope="scope">
                        <el-input-number
                          controls-position="right"
                          style="width:120px;"
                          v-model="scope.row.num"
                          :min="1"
                        ></el-input-number>
                      </template>
                    </el-table-column>
                    <el-table-column label="VIP周期(月)" align="cneter">
                      <template slot-scope="scope">
                        <el-input-number
                          controls-position="right"
                          style="width:120px;"
                          v-model="scope.row.period"
                          :min="1"
                        ></el-input-number>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="3">
                  <el-button @click="clickAdd(1)" size="mini" type="success">添加</el-button>
                </el-col>
                <el-col :span="3" :offset="1">
                  <el-button @click="clickDelete(1)" size="mini" type="danger">删除</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </section>

          <section v-if="OBShow">
            <el-form-item label="欧币兑换码：">
              <el-row>
                <el-col :span="16">
                  <el-table :data="OBList" style="width:370px">
                    <el-table-column label="添加数量" align="cneter">
                      <template slot-scope="scope">
                        <el-input-number
                          controls-position="right"
                          style="width:120px;"
                          v-model="scope.row.num"
                          :min="1"
                        ></el-input-number>
                      </template>
                    </el-table-column>
                    <el-table-column label="欧币金额" align="cneter">
                      <template slot-scope="scope">
                        <el-input-number
                          controls-position="right"
                          style="width:120px;"
                          v-model="scope.row.money"
                          :min="1"
                        ></el-input-number>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="3">
                  <el-button @click="clickAdd(2)" size="mini" type="success">添加</el-button>
                </el-col>
                <el-col :span="3" :offset="1">
                  <el-button @click="clickDelete(2)" size="mini" type="danger">删除</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </section>

          <el-form-item label="是否关联代理商" prop="agent">
            <el-radio-group v-model="addTicktForm.agent">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="addTicktForm.agent == '是'" label="选择合伙人" prop="agent">
            <el-select v-model="addTicktForm.agenterId">
              <el-option
                v-for="item in agenterList"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId"
              >{{item.vipType == 3 ?'合伙人' :item.vipType == 5 ?'运营中心' :item.vipType == 6 ?'分公司' :''}} {{item.nickName}}</el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-row>
      <table v-if="activeName == 'svip'">
        <tr>
          <td class="leftTd">svip赠送名额：</td>
          <td class="rightTd">
            <el-input
              v-model="editPartnerData.vipNum"
              clearable
              placeholder="请输入svip赠送名额"
              class="width500"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td class="leftTd">svip已用名额：</td>
          <td class="rightTd">
            <el-input
              v-model="editPartnerData.vipGivenQuota-editPartnerData.vipRemainingQuota"
              disabled
              placeholder="svip已用名额"
              class="width500"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td class="leftTd">svip剩余名额：</td>
          <td class="rightTd">
            <el-input
              v-model="editPartnerData.vipRemainingQuota"
              disabled
              placeholder="svip剩余名额"
              class="width500"
            ></el-input>
          </td>
        </tr>
      </table>
      <p class="c-pv30 c-textAlign-c">
        <el-button type="primary" icon="el-icon-check" @click="addVipNum">确认</el-button>
      </p>
    </div>
  </div>
</template>
<script>
import { getUserInfo, addVipNum } from "@/api/member";
export default {
  data() {
    return {
      editPartnerData: {
        vipNum: 0,
        vipGivenQuota: 0,
        vipRemainingQuota: 0
      },
      activeName: "vip",
	  btnLoading: false,
	  addTicktForm:{},
	  vipShow:false,
	  OBShow:false,
	  
    };
  },
  mounted() {
    for (var i in this.tableData) {
      if (this.tableData[i].id === Number(this.$route.params.partnerId)) {
        this.editPartnerData = this.tableData[i];
      }
    }
  },
  created() {
    if (
      this.$route.params.partnerId &&
      this.$route.params.partnerId != undefined
    ) {
      this.getUserInfo(this.$route.params.partnerId);
    } else {
      this.$message({
        type: "error",
        message: "获取数据失败"
      });
    }
  },
  methods: {
    handleClick(tab, event) {
      this.getUserInfo(this.$route.params.partnerId);
    },
    getUserInfo(userId) {
      var data = { userId: userId };
      getUserInfo(data)
        .then(res => {
          this.editPartnerData.vipGivenQuota =
            this.activeName == "vip"
              ? res.data.data.vipGivenQuota
              : res.data.data.svipGivenQuota;
          this.editPartnerData.vipRemainingQuota =
            this.activeName == "vip"
              ? res.data.data.vipRemainingQuota
              : res.data.data.svipRemainingQuota;
        })
        .catch(err => {
          console.log(err);
        });
    },
    addVipNum() {
      var data = {
        activeName: this.activeName,
        userId: this.$route.params.partnerId,
        vipNum: this.editPartnerData.vipNum
      };
      // if (this.editPartnerData.vipNum && isNaN(this.editPartnerData.vipNum) || this.editPartnerData.vipNum <= 0) {
      if (!this.editPartnerData.vipNum) {
        this.$message({
          type: "error",
          message: "请填写赠送名额"
        });
        return;
      }
      if (this.editPartnerData.vipNum && isNaN(this.editPartnerData.vipNum)) {
        this.$message({
          type: "error",
          message: "赠送名额请填写数值"
        });
        return;
      }
      if (
        this.editPartnerData.vipNum - 0 < 0 &&
        0 -
          this.editPartnerData.vipNum -
          this.editPartnerData.vipRemainingQuota >
          0
      ) {
        this.$message({
          type: "error",
          message:
            "最多减" + this.editPartnerData.vipRemainingQuota + "个名额！"
        });
        return;
      }

      this.btnLoading = true;
      addVipNum(data)
        .then(res => {
          if (res.data.statusCode == 200) {
            this.btnLoading = false;
            this.$message({
              type: "success",
              message: "赠送成功！"
            });
            this.editPartnerData.vipGivenQuota += parseInt(
              this.editPartnerData.vipNum
            );
            this.editPartnerData.vipRemainingQuota += parseInt(
              this.editPartnerData.vipNum
            );
            this.editPartnerData.vipNum = 0;
          }
        })
        .catch(err => {
          this.btnLoading = false;
          console.log(err);
        });
    }
  }
};
</script>
<style scoped>
p,
h3 {
  margin: 0;
  padding: 0;
}
h3 {
  font-weight: 500;
  font-size: 14px;
  height: 36px;
  background: #eee;
  border-bottom: 1px solid #ddd;
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
h3 a {
  padding: 0 10px;
}
table {
  width: 1000px;
  border: 1px solid #eee;
  border-spacing: 0;
  border-collapse: collapse;
  margin: 20px auto;
  text-align: center;
}
td {
  border: 1px solid #eee;
  line-height: 50px;
  padding-left: 10px;
}
.leftTd {
  width: 30%;
}
.rightTd {
  width: 70%;
}
</style>
